<template>
  <div v-if="props.operates" class="flex-center">
    <template v-for="(operate, i) in props.operates" :key="i">
      <ElDivider v-if="i > 0" direction="vertical" />
      <!-- <ElButton v-if="operate === 'add'" type="primary" size="small" link @click="() => emits('add')">
        <Icon icon="ep:plus" />新增
      </ElButton>
      <ElButton v-if="operate === 'batch-add'" type="primary" size="small" link @click="() => emits('batch-add')">
        <Icon icon="lsicon:batch-add-outline" />批量新增
      </ElButton>
      <ElButton v-if="operate === 'edit'" type="success" size="small" link @click="() => emits('edit')">
        <Icon icon="ep:edit" color="green" />编辑
      </ElButton>
      <ElButton v-if="operate === 'batch-edit'" type="primary" size="small" link @click="() => emits('batch-edit')">
        <Icon icon="lsicon:batch-add-filled" />批量编辑
      </ElButton>
      <ElButton v-if="operate === 'component'" type="success" size="small" link @click="() => emits('component')">
        <Icon icon="iconoir:component" />组件
      </ElButton>
      <ElButton v-if="operate === 'design'" type="success" size="small" link @click="() => emits('design')">
        <Icon icon="mdi:design" />设计
      </ElButton>
      <ElButton v-if="operate === 'remove'" type="danger" size="small" link @click="() => emits('remove')">
        <Icon icon="ep:remove" color="red" />删除
      </ElButton> -->      
      <el-tooltip v-if="operate === 'add'" effect="light" content="新增" >
        <Icon icon="ep:plus" color="#409eff" class="cursor-pointer" @click="() => emits('add')" />
      </el-tooltip>
      <el-tooltip v-if="operate === 'batch-add'" effect="light" content="批量新增">
        <Icon icon="lsicon:batch-add-outline" color="#409eff" class="cursor-pointer" @click="() => emits('batch-add')" />
      </el-tooltip>
      <el-tooltip v-if="operate === 'edit'" effect="light" content="编辑">
        <Icon icon="ep:edit" color="green" class="cursor-pointer" @click="() => emits('edit')" />
      </el-tooltip>
      <el-tooltip v-if="operate === 'batch-edit'" effect="light" content="批量编辑">
        <Icon icon="lsicon:batch-add-filled" class="cursor-pointer" @click="() => emits('batch-edit')" />
      </el-tooltip>
      <el-tooltip v-if="operate === 'component'" effect="light" content="组件">
        <Icon icon="iconoir:component" class="cursor-pointer" @click="() => emits('component')" />
      </el-tooltip>
      <el-tooltip v-if="operate === 'design'" content="设计">
        <Icon icon="mdi:design" class="cursor-pointer" @click="() => emits('design')" />
      </el-tooltip>
      <el-tooltip v-if="operate === 'remove'" content="删除">
        <Icon icon="ep:remove" class="cursor-pointer" color="red" @click="() => emits('remove')" />
      </el-tooltip>
    </template>
  </div>
</template>
<script setup lang="ts">
  import { ElButton, ElDivider, ElTooltip } from 'element-plus';
  import { Icon } from '@/components/Icon';

  const props = defineProps<{operates: string[], name?: string}>()
  const emits = defineEmits(['add', 'batch-add', 'edit', 'batch-edit', 'remove', 'component', 'design'])
</script>